class Enlarge{
    constructor(el,options={}){
        this.el = document.querySelector(el)
        this.img=this.el.querySelector('.img')
        this.mask = this.el.querySelector('.mask')
        this.enlarge = this.el.querySelector('.enlarge')
        this.init()
    }
    init(){
        this.overOut()
        this.enlargeSetWH()
        this.maskMove()
        // this.enlargeSetBg()  
        this.smallImgChange()
    }
    //❤获取非行内样式
    getStyle(obj,css){
        if(window.getComputedStyle){
            return getComputedStyle(obj)[css]
        }else{
            return obj.currentStyle[css]
        }
    }
    enlargeSetWH(){
        // let maskW=this.mask.offsetWidth //❤仅仅能获取显示元素
        // let maskH=this.mask.offsetHeight
        
        //换成非行内样式获取
        let maskW=parseInt(this.getStyle(this.mask,'width'))
        let maskH=parseInt(this.getStyle(this.mask,'height'))

        let temp=this.getStyle(this.enlarge, 'background-size')//获取非行内样式
        // console.log(temp);
        let enlargeBgW = parseInt(temp.split(' ')[0])
        let enlargeBgH = parseInt(temp.split(' ')[1])
        //大图片宽高
        let imgW = this.img.clientWidth
        let imgH = this.img.clientHeight
        //放大图宽高
        let w = maskW*(enlargeBgW/imgW)
        let h =maskH*(enlargeBgH/imgH)
        this.enlarge.style.width=w+'px'
        this.enlarge.style.height=h+'px'
    }
    overOut(){
        this.img.onmouseover = ()=> this.mask.style.display=this.enlarge.style.display='block'
        this.img.onmouseout = ()=> this.mask.style.display=this.enlarge.style.display='none'
    }
    maskMove(){
        this.img.onmousemove = (evt)=>{
            let e = evt||window.event
            let left = e.pageX - this.el.offsetLeft - this.mask.offsetWidth/2
            let top = e.pageY - this.el.offsetTop - this.mask.offsetHeight/2
            if(left<0) left=0+'px'
            if(top<0)  top=0+'px'
            if(left>this.img.offsetWidth-this.mask.offsetWidth) left=this.img.offsetWidth-this.mask.offsetWidth
            if(top>this.img.offsetHeight-this.mask.offsetHeight)top=this.img.offsetHeight-this.mask.offsetHeight
            
        
            this.mask.style.left = left+'px'
            this.mask.style.top = top+'px'
            this.enlargeSetBg(left,top)  
        }
    }
    enlargeSetBg(left,top) {
        let maskW=this.mask.offsetWidth
        let enlargeW=parseInt(this.enlarge.style.width)
        let n =enlargeW/maskW
        this.enlarge.style.backgroundPosition=`-${left*n}px -${top*n}px`
    }
    //小图切换
    smallImgChange()
    {
        let liObjs = this.el.querySelectorAll('.box ul li')
        liObjs.forEach((item,i) => {
            item.onclick = () => {
                this.el.querySelector('ul li.active').className = ''
                item.className='active'
                this.img.style.background = `url(./imgs/${i+1}.jpg)`//正图
                this.enlarge.style.background = `url(./imgs/${i+1}.big.jpg) no-repeat`//放大图
            }
        });
    
    }

}
export default Enlarge